import Taro, { Component } from '@tarojs/taro'
import { View, Image, Input, Text, Picker } from '@tarojs/components'
import { post } from '../../service/api'
import './index.scss'

class Subsribe extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      selector: ['大武昌', '大汉口', '大汉阳', '东湖高新区', '洪山区', '武昌区',
        '江夏区', '青山区', '汉阳区', '经济技术开发区', '蔡甸区', '汉南区', '江汉区', '硚口区', '江岸区', '东西湖区'
        , '黄陂区', '新洲区', '其他'],
      selectorChecked: '请选择房屋所在区域',
      name: "",
      phone: "",
      bol: false // 选择区域
    }
  }
  config = {
    navigationBarTitleText: '预约',

  }
  async subscribe() {
    const { name, phone, selectorChecked } = this.state, { data } = await post('appointment/yuyue', {
      name,
      phone,
      region: selectorChecked
    })
    if (data.code == 0) {
      console.log(123123)
      Taro.showToast({
        title: "预约成功",
      });
    } else {
      Taro.showToast({
        title: data.msg,
        icon: "none"
      });
    }
  }
  inputName(e) {
    this.setState({
      name: e.detail.value
    })
  }
  inputPhone(e) {
    this.setState({
      phone: e.detail.value
    })
  }
  btnSubscribe() {
    const { name, phone, bol } = this.state;
    let flag = name && phone && bol;
    if (flag) {
      this.subscribe()
    }
    if (!name) {
      Taro.showToast({
        title: "称呼不能为空",
        icon: 'none'
      });
      return
    }
    if (!phone) {
      Taro.showToast({
        title: "手机号不能为空",
        icon: 'none'
      });
      return
    }
    if (!bol) {
      Taro.showToast({
        title: "区域不能为空",
        icon: 'none'
      });
      return
    }
  }
  onChange = e => {
    this.setState({
      selectorChecked: this.state.selector[e.detail.value],
      bol: true
    })
  }
  render() {
    return (
      <View className='subsribe-wrapper'>
        <Image className="bg1" src={require('../../asset/imgs/bg1.png')} />
        <View className="content">
          <View className="name">
            <Input className="input" maxLength="10" onChange={this.inputName.bind(this)} placeholder="请输入您的称呼" placeholder-style="color:#FF8A03;" />
          </View>
          <View className="phone">
            <Input className="input" maxLength="11" type="number" onChange={this.inputPhone.bind(this)} placeholder="请输入手机号码" placeholder-style="color:#FF8A03;" />
          </View>
          <View className="area">
            <Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
              {this.state.selectorChecked}
              <Image className="img" src={require('../../asset/imgs/Path2.png')} />
            </Picker>
          </View>
          <View className="yy-btn" onClick={this.btnSubscribe.bind(this)}>立即预约</View>
          <View className="txt">* 预约注册即享欢乐家平台特权服务，快来完成您家的蜕变吧>>></View>
        </View>
      </View>
    )
  }
}

export default Subsribe
